import React, { Component } from 'react'
import "./SearchCenter.scss"
import { NavBar, Icon, SearchBar } from "antd-mobile"
import { withRouter } from "react-router-dom"
import myaxios from "../../utils/myaxios"
class SearchCenter extends Component {
    getProductList = (params) => {
        console.log("获取产品列表");
        myaxios.get("goods/qsearch",{
            params:{
                query:this.state.inputVal
            }
        }).then((res)=>{
            console.log(res);
            this.setState({
                productList:res,
            })
        })
    }
    state = {
        inputVal:"",
        productList:[]
    }
    handleItemClick = (e) => {
        let good_id = e.target.getAttribute("data-goods_id");
        this.props.history.push("/goodDetail/"+ good_id)
    }
    render() {
        return (
            <div className="yg-sc">
        <NavBar
        className="yg-sc-nav"
        mode="light"
        icon={<Icon type="left" />}
        onLeftClick={() => window.history.go(-1)}>
        搜索中心
        </NavBar>
        {/* 搜索中心输入框开始 */}
        <SearchBar
        className="yg-sc-search"
        placeholder="Search center"
        value={this.state.inputVal}
          // 是键盘 按下 enter 键触发
          //   onSubmit={(value) => console.log(value, "onSubmit")}
          // 清除输入内容时触发的
          //   onClear={(value) => console.log(value, "onClear")}
          // 聚焦的时候 触发
          // onFocus={() => console.log("onFocus")}
          // 失焦 触发
          //   onBlur={() => console.log("onBlur")}
          onCancel={() => this.getProductList()}
          showCancelButton
          cancelText="搜索"
          // 内容改变的时候触发
          onChange={(value) => {
            console.log(value);
            this.setState({
              inputVal: value,
            });
          }}
        />
        {/* 搜索中心输入框结束 */}
        {/* 产品列表开始 */}
        <div className="yg-sc-list" onClick={this.handleItemClick}>
            {this.state.productList.map((v)=>{
                return (
                    <div className="sc-list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                        {v.goods_name}
                    </div>
                )
            })}
        </div>
        {/* 产品列表开始 */}
        </div>
        )
    }
}

export default withRouter(SearchCenter)
